<template>
  <div class="Meterbigbox">
    <!-- 页面导航搜索盒子 -->
    <div class="topbox" :style="{ height: isheight + 'px' }">
      <el-form
        :model="orgname"
        label-position="left"
        label-width="60px"
        @submit="onSubmit"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="建筑群">
              <!-- <el-select size="small" v-model="orgname.buildingId" style="width: 100%;" @change="changejianzhu">
                <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                v-model="orgname.buildingId"
                :optionlist="qiyelist"
                @updateModelValue="changejianzhu"
                :valuekey="{ name: 'name', value: 'id' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="房间">
              <!-- <el-select v-model="orgname.roomId" placeholder="请选择房间" style="width: 100%;" size="small" >
                <el-option v-for="(item,index) in roomlistsou" :key="index" :label="item.name" :value="item.id" class="option"></el-option>
              </el-select> -->
              <FilterSelect2
                v-model="orgname.roomId"
                :optionlist="roomlistsou"
                :valuekey="{ name: 'name', value: 'id' }"
              ></FilterSelect2>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="计量点">
              <el-input
                v-model="orgname.name"
                size="small"
                style="width: 100%"
                placeholder="请输入计量点名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="网 关 ">
              <el-input
                v-model="orgname.gatewayName"
                size="small"
                style="width: 100%"
                placeholder="请输入计量点名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <template v-if="isshow">
            <el-col :span="4">
              <el-form-item label="状态">
                <el-select
                  v-model="orgname.status"
                  placeholder="请选择状态"
                  style="width: 100%"
                  size="small"
                >
                  <el-option
                    v-for="item in statelist"
                    :label="item.text"
                    :value="item.value"
                    :key="item.value"
                    class="option"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="isshow ? 24 : 4">
            <div style="text-align: right !important; margin-top: 4px">
              <el-button size="small" @click="chongzhi">重 置</el-button>
              <el-button
                style="margin-right: 10px"
                type="primary"
                size="small"
                @click="gettablelist()"
                >查 询</el-button
              >
              <button type="button" v-if="isshow" class="shou" @click="zedie">
                收起 <i class="el-icon-arrow-up"></i>
              </button>
              <button type="button" v-else class="shou" @click="zedie">
                展开 <i class="el-icon-arrow-down"></i>
              </button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <!-- 盒子主体 -->
    <div
      class="bodybox"
      :style="{ height: isshow ? 'calc(100% - 150px)' : 'calc(100% - 90px)' }"
    >
      <div class="top">
        <div>区域表计维护</div>
        <div class="butti">
          <span style="margin-right: 10px">
            <el-button @click="newaddmeter" type="primary" size="small"
              ><i class="el-icon-plus"></i>新增</el-button
            ></span
          >
          <TopTile
            @command="command"
            @daochu="daochu"
            @shuaxin="shuaxin"
          ></TopTile>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table">
        <template>
          <el-table
            :data="tableData"
            border
            :issize="issize"
            :header-cell-style="{
              'text-align': 'center',
              background: '#f5f5f5'
            }"
            v-loading="loading"
            height="calc(100% - 1px)"
            style="width: 100%"
          >
            <template slot="empty">
              <el-empty description="暂无数据"></el-empty>
            </template>
            <el-table-column
              type="index"
              align="center"
              width="60"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="buildingsName"
              label="园区建筑群"
              width="200"
            >
            </el-table-column>
            <el-table-column prop="roomName" label="房间" width="120">
            </el-table-column>
            <el-table-column prop="energyTypeName" label="用能类型">
            </el-table-column>
            <el-table-column prop="meteringTypeName" label="计量类型">
            </el-table-column>
            <el-table-column prop="name" label="计量点名称" width="150">
            </el-table-column>
            <el-table-column prop="feeTypeName" label="付费类型">
            </el-table-column>
            <el-table-column prop="meterName" label="表计名称" width="120">
            </el-table-column>
            <el-table-column prop="meterModel" label="表计型号" width="120">
            </el-table-column>
            <el-table-column prop="meterAddress" label="表计地址" width="150">
            </el-table-column>
            <el-table-column prop="ct" label="CT" width="100">
            </el-table-column>
            <el-table-column prop="pt" label="PT" width="100">
            </el-table-column>
            <el-table-column
              prop="gatewayName"
              label="关联网关名称"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="gatewayAddress"
              label="关联网关地址"
              width="150"
            >
            </el-table-column>
            <el-table-column prop="protectPowerFlag" label="是否保电">
              <template #default="{ row }">
                <span> {{ row.protectPowerFlag ? '是' : '否' }} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="priceSchemeName"
              label="电价方案"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="meterReadingDay"
              label="抄表日"
              align="center"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="overPowerAlarmFlag"
              label="是否超功率报警"
              width="150"
            >
              <template #default="{ row }">
                <span> {{ row.overPowerAlarmFlag ? '是' : '否' }} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="powerThreshold"
              label="功率阈值（kW）"
              width="150"
              align="right"
            >
            </el-table-column>
            <el-table-column
              prop="capacityFeeFlag"
              label="是否收取容量费"
              width="150"
            >
              <template #default="{ row }">
                <span> {{ row.capacityFeeFlag ? '是' : '否' }} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="capacity"
              label="容量(kVar)"
              width="150"
              align="right"
            >
            </el-table-column>
            <el-table-column
              prop="capacityFeeUnit"
              label="容量单价(元/kVar)"
              width="150"
              align="right"
            >
            </el-table-column>
            <el-table-column
              prop="coverFeeFlag"
              label="是否收取服务费"
              width="150"
            >
              <template #default="{ row }">
                <span> {{ row.coverFeeFlag ? '是' : '否' }} </span>
              </template>
            </el-table-column>
            <el-table-column
              prop="coverFeeName"
              label="服务费方案名称"
              width="150"
            >
            </el-table-column>
            <el-table-column
              prop="statusName"
              fixed="right"
              width="120"
              label="状态"
            >
              <template #default="{ row }">
                <span
                  v-if="row.statusName == '在运'"
                  class="states green"
                ></span>
                <span
                  v-else-if="row.statusName == '备用'"
                  class="states yellow"
                ></span>
                <span v-else class="states red"></span>
                <span>{{ row.statusName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address"
              label="操作"
              fixed="right"
              width="180"
            >
              <template #default="{ row }">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="浏览"
                  placement="top"
                >
                  <i
                    @click="liulan(row)"
                    class="el-icon-view"
                    style="color: #1a90fe; cursor: pointer; margin-right: 20px"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="编辑"
                  placement="top"
                >
                  <i
                    @click="modify(row)"
                    class="el-icon-edit"
                    style="color: #1a90fe; margin-right: 20px; cursor: pointer"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="投运"
                  placement="top"
                >
                  <i
                    v-if="
                      row.status == '10' && row.meteringTypeName == '公共表'
                    "
                    @click="touyun(row)"
                    class="iconfont icon-zidongtouyun-shoudong"
                    style="color: #13ce66; cursor: pointer; margin-right: 20px"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="退运"
                  placement="top"
                >
                  <i
                    v-if="
                      row.status == '20' && row.meteringTypeName == '公共表'
                    "
                    @click="tuiyun(row)"
                    class="iconfont icon-beijiantuiyundan"
                    style="color: #ff0000; margin-right: 20px; cursor: pointer"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="撤销"
                  placement="top"
                >
                  <i
                    v-if="row.status == '10' || row.status == '40'"
                    @click="chexiao(row)"
                    style="
                      color: #fdd143;
                      margin-right: 20px;
                      font-size: 18px;
                      cursor: pointer;
                    "
                    class="iconfont icon-chexiao4"
                  ></i>
                </el-tooltip>
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="删除"
                  placement="top"
                >
                  <i
                    v-if="row.status == '30'"
                    @click="delet(row)"
                    class="el-icon-delete"
                    style="color: red; cursor: pointer; margin-right: 20px"
                  ></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
            background
            layout="prev, pager, next"
            :current-page.sync="page.pageNo"
            :page-size="10"
            @current-change="gettablelist"
            :total="+totalCount"
          >
          </el-pagination>
        </div>
      </div>
      <!-- 新增/修改dialog弹窗区域 -->
      <div class="dialog">
        <el-dialog
          title="计量点配置"
          :visible.sync="dialogVisible"
          @close="quxiao"
          width="45%"
        >
          <div>
            <el-form
              ref="form"
              :model="form"
              :rules="rules"
              label-position="right"
              label-width="120px"
              @submit="onSubmit"
            >
              <el-row>
                <el-col :span="12">
                  <el-form-item label="建筑群名称" prop="buildingId">
                    <el-select
                      v-model="form.buildingId"
                      placeholder="请选择园区建筑群名称"
                      style="width: 80%"
                      size="small"
                      @change="change"
                    >
                      <el-option
                        v-for="(item, index) in qiyelist"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        class="option"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="房间" prop="roomId">
                    <el-select
                      v-model="form.roomId"
                      placeholder="请选择房间"
                      style="width: 80%"
                      size="small"
                      filterable
                    >
                      <el-option
                        v-for="(item, index) in roomlist"
                        :key="index"
                        :label="item.name"
                        :value="item.id"
                        class="option"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="用能类型" prop="energyType">
                    <el-select
                      v-model="form.energyType"
                      placeholder="请选择用能类型"
                      style="width: 80%"
                      size="small"
                    >
                      <el-option
                        v-for="(item, index) in yongnenglist"
                        :key="index"
                        :label="item.text"
                        :value="item.value"
                        class="option"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计量类型" prop="meteringType">
                    <el-select
                      v-model="form.meteringType"
                      placeholder="计量类型"
                      style="width: 80%"
                      size="small"
                    >
                      <el-option
                        v-for="(item, index) in jilianglist"
                        :key="index"
                        :label="item.text"
                        :value="item.value"
                        class="option"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <template>
                <div v-if="!form.id">
                  <el-button @click="addbiao" type="primary" size="small"
                    ><i class="el-icon-plus"></i>添加表计</el-button
                  >
                </div>
                <div
                  class="biaoji"
                  v-for="(item, index) in Contact"
                  :key="index"
                >
                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="'计量点名称' + (index + 1)">
                        <el-input
                          v-model="Contact[index].name"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入计量点名称"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="'付费类型' + (index + 1)">
                        <el-select
                          v-model="Contact[index].feeType"
                          placeholder="请选择付费类型"
                          style="width: 80%"
                          size="small"
                        >
                          <el-option
                            v-for="(item, index) in shoufeilist"
                            :key="index"
                            :label="item.text"
                            :value="item.value"
                            class="option"
                          ></el-option>
                        </el-select>
                        <span v-if="!form.id"
                          ><i
                            @click="removeContact(index)"
                            class="el-icon-delete"
                            style="
                              color: red;
                              cursor: pointer;
                              margin-top: 15px;
                            "
                          ></i
                        ></span>
                      </el-form-item>
                    </el-col>
                  </el-row>

                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="'表计' + (index + 1)">
                        <el-select
                          v-model="Contact[index].meterId"
                          filterable
                          placeholder="请选择表计"
                          style="width: 80%"
                          size="small"
                          @change="changebiaoji(index)"
                        >
                          <el-option
                            v-for="(item, index) in biaojilist"
                            :key="index"
                            :label="item.deviceName"
                            :value="item.deviceId"
                            class="option"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        :label="'表计型号' + (index + 1)"
                        prop="name"
                      >
                        <el-input
                          v-model="Contacttype[index].deviceModel"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入表计型号"
                          :disabled="true"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="'表计地址' + (index + 1)">
                        <el-input
                          v-model="Contacttype[index].deviceTag"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入表计地址"
                          :disabled="true"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item
                        :label="'关联网关' + (index + 1)"
                        prop="name"
                      >
                        <el-input
                          v-model="Contact[index].gatewayName"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入关联网关"
                          :disabled="true"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item
                        :label="'网关地址' + (index + 1)"
                        prop="name"
                      >
                        <el-input
                          v-model="Contacttype[index].gatewayTag"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入网关地址"
                          :disabled="true"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="'保电设置' + (index + 1)">
                        <el-select
                          v-model="Contact[index].protectPowerFlag"
                          placeholder="请选择保电设置"
                          style="width: 80%"
                          size="small"
                        >
                          <el-option
                            label="是"
                            value="1"
                            class="option"
                          ></el-option>
                          <el-option
                            label="否"
                            value="0"
                            class="option"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item :label="'电价方案' + (index + 1)">
                        <el-select
                          v-model="Contact[index].priceSchemeId"
                          filterable
                          placeholder="请选择电价方案"
                          style="width: 80%"
                          size="small"
                        >
                          <el-option
                            v-for="(item, index) in dianjialist"
                            :key="index"
                            :label="item.elePriceTemplateName"
                            :value="item.id"
                            class="option"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="'抄表日' + (index + 1)">
                        <el-input
                          v-model="Contact[index].meterReadingDay"
                          size="small"
                          style="width: 80%"
                          placeholder="请输入抄表日"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item :label="'备注' + (index + 1)" prop="name">
                        <el-input
                          @input="changememos"
                          v-model="Contact[index].memos"
                          size="small"
                          style="width: 92%"
                          placeholder="请输入备注"
                        ></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item :label="'超功率报警' + (index + 1)">
                        <el-switch
                          v-model="Contact[index].overPowerAlarmFlag"
                          active-color="#13ce66"
                          inactive-color="#ccc"
                        ></el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-show="Contact[index].overPowerAlarmFlag">
                    <el-col :span="12">
                      <el-form-item :label="'功率阈值' + (index + 1)">
                        <el-input
                          v-model="Contact[index].powerThreshold"
                          style="width: 80%"
                          size="small"
                        >
                          <span style="color: #000" slot="suffix">kW</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="'超功率持续时间' + (index + 1)">
                        <el-input
                          v-model="Contact[index].powerDuration"
                          style="width: 80%"
                          size="small"
                        >
                          <span style="color: #000" slot="suffix">分钟</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item :label="'是否收取容量费' + (index + 1)">
                        <el-switch
                          v-model="Contact[index].capacityFeeFlag"
                          active-color="#13ce66"
                          inactive-color="#ccc"
                        ></el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-show="Contact[index].capacityFeeFlag">
                    <el-col :span="12">
                      <el-form-item :label="'容量' + (index + 1)">
                        <el-input
                          v-model="Contact[index].capacity"
                          style="width: 80%"
                          size="small"
                        >
                          <span style="color: #000" slot="suffix">kVar</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="12">
                      <el-form-item :label="'容量单价' + (index + 1)">
                        <el-input
                          v-model="Contact[index].capacityFeeUnit"
                          style="width: 80%"
                          size="small"
                        >
                          <span style="color: #000" slot="suffix">元/kVar</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col :span="24">
                      <el-form-item :label="'是否收取服务费' + (index + 1)">
                        <el-switch
                          v-model="Contact[index].coverFeeFlag"
                          active-color="#13ce66"
                          inactive-color="#ccc"
                        ></el-switch>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row v-show="Contact[index].coverFeeFlag">
                    <el-col :span="12">
                      <el-form-item :label="'服务费方案' + (index + 1)">
                        <el-select
                          v-model="Contact[index].coverFeeId"
                          placeholder="请选择服务费方案"
                          style="width: 80%"
                          size="small"
                        >
                          <el-option
                            v-for="(item, index) in fuwufeilist"
                            :key="index"
                            :label="item.coverFeeType"
                            :value="item.id"
                            class="option"
                          ></el-option>
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </template>
            </el-form>
            <div>
              <ShiSu
                v-if="form.meteringTypeName == '公共表' && isbianji"
                :touyunrow="touyunrow"
                ref="liulanShiSu"
              ></ShiSu>
            </div>
          </div>
          <span slot="footer">
            <el-button size="small" @click="quxiao">取 消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="aresure"
              v-if="!isbianji"
              >确 定</el-button
            >
          </span>
        </el-dialog>
      </div>
      <!-- 投运弹窗 -->
      <el-dialog title="投运" :visible.sync="dialogVisibletouyun" width="30%">
        <div>
          <ShiSu :touyunrow="touyunrow" ref="ShiSu"></ShiSu>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button
            @click="dialogVisibletouyun = false"
            size="small"
            class="youyunbut"
            >取 消</el-button
          >
          <el-button
            type="primary"
            @click="suretouyun"
            size="small"
            class="youyunbut"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {
  gettablelistapi,
  getroomlistapi,
  getbiaojilistapi,
  postbiaojiapi,
  deletebiaojiapi,
  putbiaojiapi,
  getfuwufeiapi,
  getdianjiaapi,
  postchexiaoapi,
  posttouyunapi,
  posttuiyunapi
} from '@/api/prwpaid/file-management/meter'
import { getzidianxialaapi } from '@/api/guidelines'
import { getloginlistapi } from '@/api/prwpaid/file-management/Architectural-complex'
import TopTile from '@/components/TopTitle/index.vue'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import ShiSu from './ShiSu.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    ShiSu,
    TopTile,
    TableColumn
  },
  data() {
    return {
      isheight: 80,
      isshow: false,
      loading: false,
      Contacttype: [{}],
      Contact: [{ meterName: '', meterReadingDay: '' }],
      dialogVisible: false,
      issize: 'medium',
      orgname: {
        buildingId: '',
        roomId: '',
        name: '',
        gatewayName: '',
        status: ''
      },
      qiyelist: [],
      tableData: [],
      form: {},
      rules: {
        buildingId: [
          { required: true, message: '请选择建筑群', trigger: 'blur' }
        ],
        roomId: [{ required: true, message: '请选择房间', trigger: 'blur' }],
        energyType: [
          { required: true, message: '请选择用能类型', trigger: 'blur' }
        ],
        meteringType: [
          { required: true, message: '请选择计量类型', trigger: 'blur' }
        ]
      },
      page: {
        pageNo: 0,
        pageSize: 10
      },
      totalCount: '',
      yongnenglist: [],
      jilianglist: [],
      roomlist: [],
      biaojilist: [],
      shoufeilist: [],
      fuwufeilist: [],
      dianjialist: [],
      statelist: [],
      roomlistsou: [],
      dialogVisibletouyun: false,
      touyunrow: {},
      isbianji: false
    }
  },

  async mounted() {
    const res = await getloginlistapi()
    this.qiyelist = res.data.list
    const localbuildingId = localStorage.getItem('buildingId')
    const isBuildIdInArray = this.qiyelist.some(
      (item) => item.id == localbuildingId
    )
    if (isBuildIdInArray) {
      this.orgname.buildingId = localbuildingId ? localbuildingId : ''
      this.changejianzhu(this.orgname.buildingId)
    } else {
      this.orgname.buildingId = ''
    }
    // 获取状态
    const state = await getzidianxialaapi({ dictType: 'Asset_YXZT' })
    this.statelist = state.data.list
    this.gettablelist()
    // 获取用能类型
    const yongneng = await getzidianxialaapi({ dictType: 'MBM_ENERGY_TYPE' })
    this.yongnenglist = yongneng.data.list

    // 获取计量类型
    const jiliang = await getzidianxialaapi({ dictType: 'MBM_METERING_TYPE' })
    this.jilianglist = jiliang.data.list

    // 获取收费类型
    const shoufei = await getzidianxialaapi({ dictType: 'MBM_FEE_TYPE' })
    this.shoufeilist = shoufei.data.list
  },

  methods: {
    // 弹窗确定
    async aresure() {
      await this.$refs.form.validate()
      const array = this.Contact.map((ele) => {
        return {
          ...ele,
          coverFeeFlag: ele.coverFeeFlag ? '1' : '0',
          capacityFeeFlag: ele.capacityFeeFlag ? '1' : '0',
          overPowerAlarmFlag: ele.overPowerAlarmFlag ? '1' : '0'
        }
      })
      if (this.form.id) {
        const res = await putbiaojiapi({
          buildingId: this.form.buildingId,
          energyType: this.form.energyType,
          meteringType: this.form.meteringType,
          roomId: this.form.roomId,
          meterId: this.Contact[0].meterId,
          id: this.form.id,
          memos: this.Contact[0].memos,
          ...array[0]
        })
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.code == 200 ? '修改成功' : res.message
        })
      } else {
        const res = await postbiaojiapi({ ...this.form, meterList: array })
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      }
      this.dialogVisible = false
      this.gettablelist()
      this.Contact = [{ meterName: '', meterReadingDay: '' }]
      this.Contacttype = [{}]
      this.form.id = ''
      this.$refs.form.resetFields()
    },
    // 投运
    async touyun(row) {
      this.dialogVisibletouyun = true
      this.touyunrow = { ...row }
      const meterReadInfo = row.meterReadInfo
        ? JSON.parse(row.meterReadInfo)
        : {
            sharpValue: '',
            peakValue: '',
            flatValue: '',
            valleyValue: '',
            totalValue: ''
          }
      setTimeout(() => this.$refs.ShiSu.dushu(meterReadInfo), 100)
    },
    // 确认投运
    suretouyun() {
      const meterReadInfo = JSON.stringify(this.$refs.ShiSu.formtouyun)
      posttouyunapi({ ...this.touyunrow, meterReadInfo }).then((res) => {
        this.$message({
          type: res.code == '200' ? 'success' : 'warning',
          message: res.code == '200' ? '投运成功' : res.message
        })
        if (res.code == '200') this.gettablelist()
      })
      this.dialogVisibletouyun = false
    },
    // 退运
    tuiyun(row) {
      this.$confirm('此操作将会为该计量点退运, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          posttuiyunapi({ id: row.id, roomId: row.roomId }).then((res) => {
            this.$message({
              type: res.code == '200' ? 'success' : 'warning',
              message: res.code == '200' ? '投运成功' : res.message
            })
            if (res.code == '200') this.gettablelist()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消变更'
          })
        })
    },
    // 浏览
    async liulan(row) {
      this.isbianji = true
      this.touyunrow = { ...row }
      const meterReadInfo = row.meterReadInfo
        ? JSON.parse(row.meterReadInfo)
        : {
            sharpValue: 0,
            peakValue: 0,
            flatValue: 0,
            valleyValue: 0,
            totalValue: 0,
            deepValleyValue: 0
          }
      await this.modify(row)
      if (this.form.meteringTypeName == '公共表')
        this.$refs.liulanShiSu.dushu(meterReadInfo)
    },
    // 获取表格数据
    async gettablelist() {
      this.loading = true
      const {
        data: { list, totalCount }
      } = await gettablelistapi({
        ...this.orgname,
        pageNo: this.page.pageNo - 1,
        pageSize: this.page.pageSize
      })
      this.tableData = list
      this.totalCount = totalCount
      this.loading = false
    },
    // 建筑群下拉获取房间列表
    async changejianzhu(id) {
      localStorage.setItem('buildingId', id)
      const res = await getroomlistapi({ buildingId: id })
      this.roomlistsou = res.data.list
    },
    // 重置搜条件
    chongzhi() {
      localStorage.removeItem('buildingId')
      this.orgname = {
        buildingId: '',
        roomId: '',
        name: '',
        gatewayName: '',
        status: ''
      }
      this.gettablelist()
    },
    // 撤销
    async chexiao(row) {
      this.$confirm(
        '此操作将会使此项数据状态变更为备用状态, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(async () => {
          await postchexiaoapi({ id: row.id })
          this.gettablelist()
          this.$message.success('操作成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消变更'
          })
        })
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      exportexcel(
        'mbm-microservice-biz/mbm/archives/room/exportExcel',
        { ...this.orgname },
        '计量点'
      )
    },
    // 刷新列表
    shuaxin() {
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 弹窗取消
    quxiao() {
      this.dialogVisible = false
      this.Contact = [{ meterName: '', meterReadingDay: '' }]
      this.Contacttype = [{}]
      this.Contact[0].meterReadingDay = '01'
      this.form = {}
      this.$refs.form.resetFields()
    },
    // 修改
    async modify(val) {
      this.dialogVisible = true
      this.form = { ...val }
      await this.change(val.buildingId)
      this.form.roomId = +val.roomId
      this.$set(this.Contact[0], 'meterId', +val.meterId)
      this.$set(this.Contact[0], 'memos', val.memos)
      this.$set(this.Contact[0], 'name', val.name)
      this.$set(this.Contact[0], 'meterReadingDay', val.meterReadingDay)
      this.$set(this.Contact[0], 'feeType', val.feeType)
      this.$set(this.Contact[0], 'priceSchemeId', val.priceSchemeId)
      this.$set(
        this.Contact[0],
        'protectPowerFlag',
        val.protectPowerFlag?.toString()
      )
      this.$set(this.Contact[0], 'powerThreshold', val.powerThreshold)
      this.$set(this.Contact[0], 'powerDuration', val.powerDuration)
      this.$set(this.Contact[0], 'capacity', val.capacity)
      this.$set(this.Contact[0], 'capacityFeeUnit', val.capacityFeeUnit)
      this.$set(this.Contact[0], 'coverFeeId', val.coverFeeId)
      if (val.coverFeeFlag) this.$set(this.Contact[0], 'coverFeeFlag', true)
      if (val.capacityFeeFlag)
        this.$set(this.Contact[0], 'capacityFeeFlag', true)
      if (val.overPowerAlarmFlag)
        this.$set(this.Contact[0], 'overPowerAlarmFlag', true)
      this.$forceUpdate()
      this.changebiaoji(0)
    },
    // 删除
    delet(val) {
      this.$confirm('此操作将永久删除该档案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await deletebiaojiapi({ id: val.id })
          this.gettablelist()
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 添加表计
    addbiao() {
      this.Contact.push({})
      this.Contacttype.push({})
      // for (let index = 1; index < this.Contact.length; index++) {
      this.$set(this.Contact[this.Contact.length - 1], 'meterReadingDay', '01')
      this.$set(
        this.Contact[this.Contact.length - 1],
        'priceSchemeId',
        this.dianjialist[0]?.id
      )
      this.$set(
        this.Contact[this.Contact.length - 1],
        'feeType',
        this.shoufeilist[0].value
      )
      this.$set(this.Contact[this.Contact.length - 1], 'protectPowerFlag', '1')
      // }
    },
    // 删除表计
    removeContact(index) {
      if (this.Contact.length == 1)
        return this.$message.warning('最后一项不可删除')
      this.Contact.splice(index, 1)
      this.Contacttype.splice(index, 1)
    },
    // 建筑群下拉
    async change(val) {
      const res = await getroomlistapi({ buildingId: val })
      // 根据建筑群id查询服务费列表
      const fuwufei = await getfuwufeiapi({ buildingId: val })
      this.fuwufeilist = fuwufei.data.list
      // 获取电价模板列表
      const orgNo = this.qiyelist.filter((ele) => ele.id == val)[0]?.subBuro
      const dianjia = await getdianjiaapi({
        elePriceTemplateType: '01',
        orgNo: orgNo
      })
      this.dianjialist = dianjia.data?.list
      this.roomlist = res.data.list
      if (!this.form.id) {
        this.$set(this.Contact[0], 'priceSchemeId', this.dianjialist[0].id)
        this.$set(this.form, 'roomId', this.roomlist[0]?.id)
      }
      if (this.roomlist.length == 0) {
        this.form.roomId = ''
      }
      const companyNo = this.qiyelist.filter((ele) => ele.id == val)[0].subBuro
      const biaoji = await getbiaojilistapi({
        companyNo,
        meterId: this.form.meterId ? this.form.meterId : ''
      })
      this.biaojilist = biaoji.data.list
      if (this.biaojilist.length == 0) {
        for (let i = 0; i < this.Contact.length; i++) {
          this.Contact[i].meterId = ''
          this.Contact[i].meterName = ''
          this.Contacttype[i].deviceModel = ''
          this.Contacttype[i].deviceTag = ''
          this.Contacttype[i].gatewayName = ''
          this.Contacttype[i].gatewayTag = ''
        }
      }
    },
    // 表计下拉
    changebiaoji(val) {
      this.$forceUpdate()
      console.log(this.form)
      const object = this.biaojilist.filter(
        (ele) => ele.deviceId == this.Contact[val].meterId
      )[0]
      this.Contact[val].meterName = object.deviceName ? object.deviceName : ''
      this.Contacttype[val].deviceModel = object.deviceModelName
      this.Contacttype[val].deviceTag = object.deviceTag
      this.Contacttype[val].gatewayName = object.gatewayName
      this.Contact[val].gatewayName = object.gatewayName
      this.Contacttype[val].gatewayTag = object.gatewayTag
    },
    // 备注选择
    changememos() {
      this.$forceUpdate()
    },
    // 日期选择
    changepicker() {
      this.$forceUpdate()
    },
    onSubmit(event) {
      event.preventDefault() // 阻止默认的提交事件
      // 处理表单提交逻辑
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      for (let index = 0; index < this.Contact.length; index++) {
        this.Contact[index].meterReadingDay = year + '-' + month + '-' + day
      }
    },
    // 折叠导航栏
    zedie() {
      this.isshow = !this.isshow
      if (this.isshow) {
        this.isheight = 140
      } else {
        this.isheight = 80
      }
    },
    //阻止form表单默认提交行为
    onSubmit(event) {
      event.preventDefault() // 阻止默认的提交事件
      // 处理表单提交逻辑
    },
    async newaddmeter() {
      this.dialogVisible = true
      this.form.buildingId = this.orgname.buildingId
      if (this.orgname.buildingId) {
        await this.change(this.orgname.buildingId)
      }
      this.$set(this.Contact[0], 'feeType', this.shoufeilist[0].value)
      this.$set(this.Contact[0], 'protectPowerFlag', '1')
      this.$set(this.Contact[0], 'meterReadingDay', '01')
      this.$set(this.form, 'meteringType', this.jilianglist[0].value)
      this.$set(this.form, 'energyType', this.yongnenglist[0].value)
    }
  },
  watch: {
    async dialogVisible(val) {
      if (!val) {
        this.isbianji = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fenye {
  text-align: right;
  margin-top: 10px;
}
.option {
  padding-left: 10px;
}
.Meterbigbox {
  height: 100%;
  padding: 10px;
  .topbox {
    height: 80px;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
    .shou {
      color: #1890ff;
      border: none;
      background-color: #fff;
    }
  }
  .bodybox {
    // height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .top {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      .butti {
        display: flex;
      }
    }
    .table {
      height: 90%;
      .states {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin-right: 10px;
        border-radius: 50%;
      }
      .red {
        background-color: red;
      }
      .green {
        background-color: #13ce66;
      }
      .yellow {
        background-color: #fdd143;
      }
    }
    .dialog {
      .add {
        margin: 10px 0;
        width: auto;
        padding: 0 10px;
        height: 30px;
        color: #fff;
        background-color: #3b8eea;
      }
      .biaoji {
        border: 1px solid #ccc;
        margin-bottom: 10px;
      }
    }
  }
}
.youyunbut {
  width: 60px;
  height: 30px;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
</style>
